<template>
  <div class="app-container">
    <el-form ref="form" label-width="200px">
      <el-tabs type="border-card" v-model="tab">
        <el-tab-pane :label="item.title" v-for="(item,index) in list" :name="item.id">

          <el-form-item :label="tab.info" v-for="(tab,ind) in item.tab">
            <el-input v-model='form[tab.menu_name]' v-if="tab.type=='text'" />


            <el-radio-group v-model="form[tab.menu_name]" v-if="tab.type=='radio'">
              <el-radio :label="param" :value="inx" v-for="(param,inx) in tab.parameter"></el-radio>

            </el-radio-group>
          </el-form-item>
        </el-tab-pane>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-tabs>

    </el-form>
  </div>
</template>

<script>
  import {
    onSubmit,
    getSystemConfigTab
  } from '@/api/system'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    data() {
      return {
        tab: "1",
        list: null,
        form: [

        ]
      }
    },
    created() {
      this.getSystemConfigTab()
    },
    methods: {
      getSystemConfigTab() {
        getSystemConfigTab().then(resp => {
          this.list = resp.data.tab_list
          this.form = resp.data.fields
          console.log(this.list)
        })
      },
      onSubmit() {
        onSubmit(this.form).then(resp => {
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000,
            onclose: this.getSystemConfigTab()
          })
        })

      }
    }

  }
</script>

<style>
</style>
